<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" crossorigin="anonymous">

    <title>登录</title>

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="username"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        /*密码可见小bug*/
        .was-validated .form-control:invalid, .form-control.is-invalid {
            border-color: #dc3545;
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }
    </style>
</head>
<body style="text-align: center">
<form class="form-signin" id="submit" action="/login" method="post">
    <img class="mb-4" th:src="@{/image/bootstrap-solid.svg}" alt="没有加载的可怜图片" width="72" height="72"
         src="../../static/image/bootstrap-solid.svg">
    <h1 class="h3 mb-3 font-weight-normal">登录</h1>
    <!--警告信息，异步修改状态-->
    <div class="alert alert-danger small" role="alert" style="display: none" id="fail">用户名或密码错误</div>
    <label for="username" class="sr-only">用户名</label>
    <input type="text" id="username" name="username" class="form-control" placeholder="用户名" required autofocus>
    <label for="password" class="sr-only">密码</label>
    <input type="password" id="password" name="password" class="form-control" placeholder="密码" required>
    <div>
        <a th:href="@{/register}">没有账号，我想入驻社区</a><br>
    </div>

    <div class="row" style="margin-top: 15px">
        <div class="col">
            <a class="btn btn-lg btn-secondary btn-block" href="/index" type="button">返回</a>
        </div>
        <div class="col">
            <button class="btn btn-lg btn-primary btn-block col" type="button" id="btn-login">登入</button>
        </div>
    </div>

</form>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/js/jquery-3.5.1.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/popper.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/bootstrap.min.js}" crossorigin="anonymous"></script>
<script>
    $(function () {
        let flag = false;

        /*异步登录请求*/
        $("#btn-login").click(function () {
            let $username = $("#username");
            let $password = $("#password");

            /*判断表单是否为空*/
            if ($username.val() === "") {
                $username.attr("class", "form-control is-invalid");
                flag = false;
            }
            if ($password.val() === "") {
                $password.attr("class", "form-control is-invalid");
                flag = false;
            }
            if (!flag) {
                return;
            }

            /*Ajax发送异步登入请求*/
            $.post("/login", {username: $username.val(), password: $password.val()}, function (result) {
                if (result["msg"] === "error") {
                    $("#fail").css("display", "");
                } else if (result["msg"] === "success") {
                    $(this).attr("class", "btn btn-lg btn-success btn-block col");
                    window.location.href = result["url"];
                }
            });
        });

        /*回车提交*/
        $(window).keydown(function (e) {
            let curKey = e.which;
            if (curKey === 13) {
                $("#btn-login").click();    //点击按钮
            }
        });

        /*判断输入框是否为空*/
        $("#username").blur(function () {
            if ($(this).val() === "") {
                $(this).attr("class", "form-control is-invalid");
            } else {
                $(this).attr("class", "form-control");
                flag = true;
            }
        });
        $("#password").blur(function () {
            if ($(this).val() === "") {
                $(this).attr("class", "form-control is-invalid");
            } else {
                $(this).attr("class", "form-control");
                flag = true;
            }
        });
    });
</script>
</body>
</html>
